<template>
  <div class="article-list">
    <van-pull-refresh v-model="isPullDownLoading" @refresh="onRefresh"
      :success-text="refreshSuccessText" success-duration="1000">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :error.sync="error"
        error-text="请求失败，点击重新加载" @load="onLoad">
        <ArticleItem v-for="(articlt, index) in articlts" :key="index" :article="articlt"
          :title="articlt.title" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'
import ArticleItem from '@/components/article-item'

export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      articlts: [],
      finished: false,
      error: false,
      loading: false,
      // 下拉刷新
      isPullDownLoading: false,
      // 刷新完成提示
      refreshSuccessText: ''
    }
  },
  // 计算属性
  computed: {},
  // 监控data中的数据变化
  watch: {},
  methods: {
    // 上拉刷新
    async onLoad () {
      // 1 请求获取数据
      const { data } = await getArticles({
        channel_id: this.channel.id,
        channel_name: this.channel.name,
        timestamp: Date.now()
      })
      // 2 把数据 push 到 list 数组上
      // console.log(data)
      this.articlts.push(...data.data.results)
      // 3 设置本次加载状态结束
      this.loading = false
      // 4 数据全部加载完成
      if (this.articlts.length > 40) {
        this.finished = true
      }
    },
    // 下拉刷新
    async onRefresh () {
      // 1 请求获取数据
      const { data } = await getArticles({
        channel_id: this.channel.id,
        channel_name: this.channel.name,
        timestamp: Date.now()
      })
      // 2 把数据 unshift 追加到数组的顶部
      const { results } = data.data
      this.articlts.unshift(...results)
      // 3 设置本次加载状态结束
      this.isPullDownLoading = false
      // 4 数据全部加载完成
      this.refreshSuccessText = `更新了${results.length}条数据`
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang='less'>
// 给文章列表子组件添加固定样式
.article-list {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 50px;
  top: 90px;
  overflow-y: auto; // 当文章内容超出时，自动隐藏
}
</style>
